<div id="login">
  <div id="title">
    {{siteInfo.appName}}
  </div>
  <form gnForm style="padding: 0 3rem;">
    <gn-form-field label="登录名" field="username" [formGroup]="form.formGroup"
                   [validators]="[{message: '请输入', name: 'required', validatorFn: form.validators.required}]">
      <input matInput placeholder="请输入登录名" required="true" formControlName="username">
    </gn-form-field>
    <gn-form-field label="密码" field="password" [formGroup]="form.formGroup"
                   [validators]="[{message: '请输入', name: 'required', validatorFn: form.validators.required}]">
      <input matInput placeholder="请输入密码" type="password" required="true" formControlName="password">
    </gn-form-field>
    <div id="code" *ngIf="config.checkCode">
      <gn-form-field label="验证码" field="code" [formGroup]="form.formGroup"
                     [validators]="[{message: '请输入', name: 'required', validatorFn: form.validators.required}]">
        <input matInput placeholder="请输入验证码" required="true" formControlName="code">
      </gn-form-field>
      <img [src]="imageUrl" (click)="refreshCode()"/>
    </div>
  </form>
  <button mat-raised-button color="primary" [disabled]="form.formGroup.invalid" (click)="loginPwd()">登录
  </button>
</div>
